<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>	
<div id="app">
	<router-link to='/foo'>/foo</router-link>
	<transition name='slide'>
  		<router-view></router-view>
	</transition>
</div>
<script>
	//<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：
	
	const Foo = {
		template : `<div>Foo</div>`,
	}
	const router = new VueRouter({
		routes : [
			{ path : '/foo', component : Foo, }
		],
	})
	const vm = new Vue({
		el : '#app',
		router,
		data : {},
	})
</script>	
</body>
</html>